<template>
	<div><div>
		<p>{{ message1 }}</p>
		
		<div v-html="message2"></div>
		
		<p v-bind:class="cls">设置样式</p>

		{{5+5}}<br>
    	{{ ok ? 'YES': 'NO'}}<br>
    	{{ message.split('').reverse().join('') }}
    	<div v-bind:id="'list-'+ id">Hello！</div>

    	<p v-if="seen">现在你看到我了</p>

    	<input v-model="msg">
    	<button v-on:click="reMsg">反转</button>

    	<div>{{ msg | format }}</div>

	</div></div>
</template>
<script>
export default {
  data () { 
    return {
    	message1: 'message1!',
    	message2: '<h1>message2！</h1>',
    	cls:'class1', 
    	ok: true,
    	message: 'Hello',
    	id : 1,
    	seen: true,
    	msg: 'alun',
    } 
  },
  methods: {
    reMsg: function () {
      this.msg = this.msg.split('').reverse().join('')
    }
  },
  filters: {
    format: function (value) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
 }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.class1 {
  font-size:30px;
  color:red;
}
</style>
